<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
            list-style: none;
        }
        body{
            margin:0px auto;
            width: 1401px;
            background: white;
        }
        .header{
            margin-top:30px;
            width: 1401px;
            height: 60px;
            margin-bottom:30px;
            border-bottom:1px solid gray;
            
        }
        .header li{
            background:yellow;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            padding:10px;
            float:left;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
            margin-right: 20px;
            transition: all 1s linear 0s;
        }
        .header li:hover{
            background:red;
            transform: rotate(360deg) ;
        }
        .header span{
            margin-right:500px;
            background:gray;
            float:left; 
            width: 30px;
            height: 30px;
            cursor: pointer;
            
            transition: all 1s linear 0s;
        }
        .header span:hover{
            border-radius: 50%;
            background:blue;
            transform: rotate(360deg) scale(2);
        }
        .header a{
            background:skyblue;
            width: 40px;
            height: 40px;
            padding:10px;
            border-radius: 50%;
            float:right;
            transition: all 1s linear 0s;
        }
        .header a:hover{
            background:greenyellow;
            transform: rotate(360deg) ;
        }
        .banner{
            border-top:1px solid gray;
            width: 1218px;
            height: 519px;
            /* background:skyblue; */
            margin:0px auto;
            border:1px solid black;
        }
        .banner .left{
            width: 869px;
            height: 519px;
            float:left;
            position: relative;
        }
        .banner .left p{
            position: relative;
            bottom:0px;
            height: 50px;
            width: 869px;
            position: absolute;
            background:black;
            background:rgba(0, 0, 0, 0.6);
            color:white;
            font-size:20px;
            padding:5px;
        }
        .banner .left img{
            width:869px;
            height: 519px;
            float:left;
        }
       
        .banner .right{
            height: 486px;
            width: 284px;
            float:right;
        }
        .banner .right img{
            float:left;
            width: 285px;
            margin-bottom:19px;
        }
        .banner .right li{
            height: 160px;
            width:285px;
            float:left;
            position: relative;
            margin-bottom: 18px;
            overflow: hidden;
        }
        .banner .right li:hover{
            transform: scale(1.5);
            transition:all 0.5s linear 0s;
        }
        .banner .right p{
            height: 30px;
            width: 285px;
            background:black;
            background: rgba(0, 0, 0,0.6);
            bottom:0px;
            position: absolute;
            color:white;
        }
        .nav{
            margin:60px auto;
            width: 1218px;
            height: 56px;
            
        }
        .nav select{
            float:left;
            height: 40px;
            width: 200px;
            margin-right:20px;
        }
        .decoration{
            width:1218px;
            margin:0px auto;
            /* background: blue; */
            height: 1063px;
            border:1px solid black;
        }
        .decoration li{
            width: 287px;
            height: 310px;
            float:left;
            background: skyblue;
            margin-right:15px;
            margin-bottom:15px;
            border:1px solid black;
            
        }
        .decoration li:hover{
            transform: scale(1.2);
            transition:all 0.5s linear 0s;
        }
        .decoration img{
            height: 180px;
            width: 287px;
            float: left;
        }
        .decoration p{
            float:left;
            font-size:20px;
            color:white;
            bottom:0px;
        }
        .decoration span{
            float:left;
            bottom:0px;
            left:0px;
            color:white;
            margin-right:64px;
            margin-top:58px;
        }
        
        .decoration .bottom p{
            color:black;
            height: 30px;
            width: 1218px;
            background:white;
            text-align: center;
        }
        .footer{
            height: 300px;
            width:1218px;
            /* background: red; */
            margin:0px auto;
        }
        .footer img{
            height: 50px;
            float:left;
            margin:30px 10px 30px 10px;
        }
        .footer span{
            color:grey;
            font-size:20px;
            float:left;
        }
        .footer a{
            color:grey;
            font-size:18px;
            margin-right: 20px;
            float: left;
            margin-top:50px;
            text-decoration: none;
        }
        .footer a:hover{
            color:red;
        }
        .footer .one{
            width:1218px;
            height: 20px;
            float:left;
        }
        .footer .two{
            width:1218px;
            float:left;
            height: 100px;
        }
        .footer .three{
            width:1218px;
            float:left;
            height: 20px;
        }
        .footer .four{
            width:1218px;
            float:left;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="header">
            <span></span>
        <ul>
            <li>赞</li>
            <li>萌</li>
            <li>哈</li>
            <li>艹</li>
            <li>买</li>
        </ul>
        <a href="">登录</a>
    </div>
    <div class="banner">
        <div class="left"><a href=""><img src="images/s003.jpg" alt=""></a>
        <p>Brand 100，设计成就品牌</p>
        </div>
        <div class="right">
            <ul>
            <li><a href=""><img src="images/s02.jpg" alt=""><p>想点亮圣诞气氛?试试这个[驯鹿]灯</p></a></li>
            <li><a href=""><img src="images/s03.jpg" alt=""><p>Designer 100，100个设计师，100个故事</p></a></li>
            <li><a href=""><img src="images/s04.jpg" alt=""><p>旧椅子获新生，还比以前更酷炫了</p></a></li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <select name="" id=""><option value="">最新</option></select>
        <select name="" id=""><option value="">最热</option></select>
        <select name="" id=""><option value="">热议</option></select>
        <select name="" id=""><option value="">随机</option></select>
    </div>
    <div class="decoration">
       
        <ul>
        <li><a href=""><img src="images/i01.jpg" alt=""><p>用水才能擦去笔迹，它只想保护好设计师的创意</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i02.jpg" alt=""><p>用水才能擦去笔迹，它只想保护好设计师的创意</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i03.jpg" alt=""><p>健身也走[科技范]，你以为这仅仅只是个瑜伽垫?</p><span>16小时前</span><span>11</span><span>2</span></a></li>
        <li><a href=""><img src="images/i04.jpg" alt=""><p>牙缝清洁怎么办？牙签牙线都过时了，用[刷子]刷吧 </p><span>16小时前</span><span>640</span><span>165</span></a></li>
        <li><a href=""><img src="images/i05.jpg" alt=""><p>矮怎么了？照样能够拿到书架顶端的书</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i06.png" alt=""><p>这简直是一场肉体的盛宴，无关设计，无关时尚，无关商业</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i07.jpg" alt=""><p>中国国际设计节PK世界工业设计大会，哪个更棒？</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i07.png" alt=""><p>首届世界工业设计大会开在家门口杭州，中国设计师们躁起来 </p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i08.jpg" alt=""><p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i09.jpg" alt=""><p>废纸打造的铅笔，像是一朵朵落入凡间的花</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i10.jpg" alt=""><p>倚靠在毯子上，这件事听着就让人舒坦</p><span>2小时前</span><span>122</span><span>2</span></a></li>
        <li><a href=""><img src="images/i11.jpg" alt=""><p>别笑话虚拟键盘没有实体键盘，打字or音乐，它们说变就能变</p><span>2小时前</span><span>122</span><span>2</span></a></li>
    </ul>
    <div class="bottom"><p>太快了，慢慢来！</p></div>
    </div>
    <div class="footer">
        <div class="one"><span>合作伙伴</span><br></div>
        <div class="two"><img src="images/x01.png" alt=""><img src="images/x02.png" alt=""><img src="images/x03.png" alt=""><img src="images/x04.png" alt=""><img src="images/x05.png" alt=""><img src="images/x06.png" alt=""><img src="images/x07.jpg" alt=""></div>
        <div class="three"><span>友情链接</span></div>
        <div class="four">  
            <ul>
            <li><a href="">DRC北京工业设计创意产业基地</a></li>
            <li><a href="">中国工业设计协会</a></li>
            <li><a href="">设计癖</a></li>
            <li><a href="">网易家居</a></li>
            <li><a href="">凤凰家居 </a></li>
            <li><a href="">智东西</a></li>
            <li><a href="">壹网空间</a></li>
            <li><a href="">七牛云存储</a></li>
            <li><a href="">高清图片</a></li>
            <li><a href="">Fotor</a></li>
            </ul></div>
    </div>
</body>
</html>